<template>
    <div class="mod-config">
        <!--  头部：新增，批量删除    -->
        <div>
            <el-select v-model="value" placeholder="请选择" style="margin-right: 20px" @change="handleChange">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <!--    新增按钮      -->
            <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addDictData">新增字典数据</el-button>
            <!--    新增按钮      -->
            <el-button type="primary" icon="el-icon-plus" @click="addRoot">新增root</el-button>
            <!--    新增按钮      -->
<!--            <el-button type="danger" icon="el-icon-turn-off" @click="noRoot">禁用root</el-button>-->
            <el-form :inline="true" style="float:right">
                <el-form-item>
                    <el-button icon="el-icon-search" type="primary" circle @click="search"></el-button>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="searchName" placeholder="搜索字典名称例如：汉族" size="medium" class="input"
                              clearable="clearable"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <el-divider></el-divider>
        <!--   主体：表格（基本信息，修改，删除）   -->
        <div class="table">
            <el-table :data="tableData" border style="width: 100%" v-loading="dataListLoading">
                <el-table-column type="index" header-align="center" align="center" width="100" label="序号">
                    <template #default="scope">
                        <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="名称" width="230" align="center"></el-table-column>
                <el-table-column prop="abbreviation" label="简称" width="230" align="center"></el-table-column>
                <el-table-column prop="type" label="类型" width="230" align="center"></el-table-column>
                <el-table-column prop="remarks" label="数据说明" width="230" align="center"></el-table-column>
                <el-table-column prop="createTime" label="登记日期" width="230" align="center"></el-table-column>
                <el-table-column prop="modifiedTime" label="修改日期" width="230" align="center"></el-table-column>
                <el-table-column fixed="right" label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" icon="el-icon-edit" type="primary" @click="update(scope.row.id)">
                            修 改
                        </el-button>
                        <el-button size="small" icon="el-icon-turn-off" type="danger" @click="noNode(scope.row.id)">
                            禁 用
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    align="left"
                    @current-change="changePage"
                    background
                    layout="total, prev, pager, next"
                    :page-size="pageSize"
                    :current-page="currentPage"
                    :total="total">
            </el-pagination>
            <!--   弹窗-新增字典数据  -->
            <el-dialog title="新增字典数据" :visible.sync="editFormVisibleForAddDictData" :show-close="isClose"
                       :close-on-click-modal="isClose" center>
                <el-divider><i class="el-icon-setting"></i></el-divider>
                <el-form :model="addDictForm" :rules="addDictFormRules" label-width="0px" class="demo-ruleForm">
                    <el-form-item prop="name" label="">
                        <el-input style="font-size: 16px;" placeholder="请填写字典数据名称" v-model="addDictForm.name">
                            <template slot="prepend"><i class="el-icon-edit"></i>名称</template>
                        </el-input>
                    </el-form-item>
                    <div style="height: 20px"></div>
                    <el-form-item prop="abbreviation" label="">
                        <el-input style="font-size: 16px;" placeholder="请填写字典数据简称"
                                  v-model="addDictForm.abbreviation">
                            <template slot="prepend"><i class="el-icon-edit"></i>简称</template>
                        </el-input>
                    </el-form-item>
                    <div style="height: 20px"></div>
                    <el-form-item prop="remarks" label="">
                        <el-input style="font-size: 16px;" placeholder="请填写字典数据说明"
                                  v-model="addDictForm.remarks">
                            <template slot="prepend"><i class="el-icon-edit"></i>说明</template>
                        </el-input>
                    </el-form-item>
                    <div style="height: 20px"></div>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editFormVisibleForAddDictData=false">取 消</el-button>
                    <el-button type="primary" @click="comitDict">确 定</el-button>
                </div>
            </el-dialog>
            <!--   弹窗-新增顶层字典数据  -->
            <el-dialog title="新增顶层字典数据" :visible.sync="editFormVisibleForAddRootData" :show-close="isClose"
                       :close-on-click-modal="isClose" center>
                <el-divider><i class="el-icon-setting"></i></el-divider>
                <el-form :model="addRootForm" :rules="addDictFormRules" label-width="0px" class="demo-ruleForm">
                    <el-form-item prop="name" label="">
                        <el-input style="font-size: 16px;" placeholder="请填写字典名称" v-model="addRootForm.name">
                            <template slot="prepend"><i class="el-icon-edit"></i>名称</template>
                        </el-input>
                    </el-form-item>
                    <div style="height: 20px"></div>
                    <el-form-item prop="abbreviation" label="">
                        <el-input style="font-size: 16px;" placeholder="请填写字典简称"
                                  v-model="addRootForm.abbreviation">
                            <template slot="prepend"><i class="el-icon-edit"></i>简称</template>
                        </el-input>
                    </el-form-item>
                    <div style="height: 20px"></div>
                    <el-form-item prop="remarks" label="">
                        <el-input style="font-size: 16px;" placeholder="请填写字典说明" v-model="addRootForm.remarks">
                            <template slot="prepend"><i class="el-icon-edit"></i>说明</template>
                        </el-input>
                    </el-form-item>
                    <div style="height: 20px"></div>
                    <el-form-item prop="remarks" label="">
                        <el-input style="font-size: 16px;" placeholder="请填写字典类型" v-model="addRootForm.type">
                            <template slot="prepend"><i class="el-icon-edit"></i>类型</template>
                        </el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editFormVisibleForAddRootData=false">取 消</el-button>
                    <el-button type="primary" @click="comitRoot">确 定</el-button>
                </div>
            </el-dialog>
            <!--   弹窗-修改字典数据  -->
            <el-dialog title="修改字典数据" :visible.sync="editFormVisibleForUpdateDictData" :show-close="isClose"
                       :close-on-click-modal="isClose" center>
                <el-divider><i class="el-icon-setting"></i></el-divider>
                <el-form :model="updateDictForm" :rules="addDictFormRules" label-width="0px" class="demo-ruleForm">
                    <el-form-item prop="name" label="">
                        <el-input style="font-size: 16px;" placeholder="请填写字典名称" v-model="updateDictForm.name">
                            <template slot="prepend"><i class="el-icon-edit"></i>名称</template>
                        </el-input>
                    </el-form-item>
                    <div style="height: 20px"></div>
                    <el-form-item prop="abbreviation" label="">
                        <el-input style="font-size: 16px;" placeholder="请填写字典简称" v-model="updateDictForm.abbreviation" :disabled="true">
                            <template slot="prepend"><i class="el-icon-view"></i>简称</template>
                        </el-input>
                    </el-form-item>
                    <div style="height: 20px"></div>
                    <el-form-item prop="remarks" label="">
                        <el-input style="font-size: 16px;" placeholder="请填写字典说明"
                                  v-model="updateDictForm.remarks">
                            <template slot="prepend"><i class="el-icon-edit"></i>说明</template>
                        </el-input>
                    </el-form-item>
                    <div style="height: 20px"></div>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editFormVisibleForUpdateDictData=false">取 消</el-button>
                    <el-button type="primary" @click="updateDictDate">确 定</el-button>
                </div>
            </el-dialog>
        </div>

    </div>
</template>
<script>
import dayjs from "dayjs";

export default {
    data() {
        return {
            //是否为搜索状态
            isSearch: false,
            // 当前页
            currentPage: this.$router.currentRoute.query.page ? parseInt(this.$router.currentRoute.query.page) : 1,
            // 一共多少页
            pageSize: 10,
            // 一共多少条
            total: 10,
            // 加载
            dataListLoading: false,
            //表格数据
            tableData: [],
            //下拉框数据
            options: [],
            //当前字典类型
            curType: '',
            // 下拉框选中值
            value: '',
            //新增字典数据
            editFormVisibleForAddDictData: false,
            //新增顶层字典数据
            editFormVisibleForAddRootData: false,
            //修改字典数据
            editFormVisibleForUpdateDictData: false,
            //不显示关闭
            isClose: false,
            //新增字典数据
            addDictForm: {
                name: '',
                abbreviation: '',
                parentId: -1,
                type: '',
                remarks: ''
            },
            //新增顶层字典数据
            addRootForm: {
                name: '',
                abbreviation: '',
                parentId: 0,
                type: '',
                remarks: ''
            },
            //新增顶层字典数据
            updateDictForm: {
                id: -1,
                name: '',
                abbreviation: '',
                remarks: ''
            },
            //新增字典数据校验
            addDictFormRules: {
                name: [
                    {required: true, message: '请输入字典数据名称', trigger: 'blur'},
                    {max: 10, message: '最多不能超过10个字符', trigger: 'blur'}
                ],
                abbreviation: [
                    {required: true, message: '请输入邮箱地址', trigger: 'blur'},
                    {max: 30, message: '最多不能超过30个字符', trigger: 'blur'}
                ],
                parentId: [
                    {required: true, message: '请选择父级', trigger: 'blur'}
                ],
                type: [
                    {required: true, message: '请选择字典类型', trigger: 'blur'}
                ],
                remarks: [
                    {max: 100, message: '最多不能超过100个字符', trigger: 'blur'}
                ]
            },
            //搜索的字典名称
            searchName: ''
        }
    },
    mounted() {
        this.isSearch= false;
        this.loadOptions();
    },
    methods: {
        dayjs,
        handleChange() {
            this.loadDictData()
        },
        reSearch(){
            let that = this;
            this.currentPage = 1;
            that.$http('/dict/search', 'POST', {
                name: that.searchName,
                parentId: that.value,
                pageNum: this.currentPage
            }, (resp) => {
                if (resp.data.code === 20000) {
                    let data = resp.data.data;
                    that.tableData = data.list;
                    if (data.list.length > 0) {
                        let message = '暂无'
                        this.curType = that.tableData[0].type;
                        for (let e of that.tableData) {
                            this.dictInfo(e,message)
                        }
                        that.currentPage = resp.data.data.currentPage;
                        that.pageSize = resp.data.data.pageSize;
                        that.total = resp.data.data.total;
                    } else {
                        that.$message({
                            type: 'info',
                            message: '未搜索到结果，请重试！'
                        });
                    }
                }
            })
        },
        search() {
            let that = this;
            this.isSearch = true;
            if (that.searchName === '') {
                that.$message({
                    type: 'error',
                    message: '请先填写需要搜索的名称'
                });
                this.isSearch = false;
            }
            that.$http('/dict/search', 'POST', {
                name: that.searchName,
                parentId: that.value,
                pageNum: that.currentPage
            }, (resp) => {
                if (resp.data.code === 20000) {
                    let data = resp.data.data;
                    that.tableData = data.list;
                    if (data.list.length > 0) {
                        let message = '暂无'
                        this.curType = that.tableData[0].type;
                        for (let e of that.tableData) {
                           this.dictInfo(e,message)
                        }
                        that.currentPage = resp.data.data.currentPage;
                        that.pageSize = resp.data.data.pageSize;
                        that.total = resp.data.data.total;
                    } else {
                        that.reSearch();
                    }
                }
            })
        },
        dictInfo(e,message){
            if (e.name === '' || e.name === null) {
                e.name = message;
            }
            if (e.abbreviation === '' || e.abbreviation === null) {
                e.abbreviation = message;
            }
            if (e.type === '' || e.type === null) {
                e.type = message;
            }
            if (e.remarks === '' || e.remarks === null) {
                e.remarks = message;
            }
            if (e.enable === '' || e.enable === null) {
                e.enable = message;
            }
            if (e.createTime === '' || e.createTime === null) {
                e.createTime = message;
            } else {
                e.createTime = dayjs(e.createTime).format('YYYY-MM-DD HH:mm:ss');
            }
            if (e.modifiedTime === '' || e.modifiedTime === null) {
                e.modifiedTime = message;
            } else {
                e.modifiedTime = dayjs(e.modifiedTime).format('YYYY-MM-DD HH:mm:ss');
            }
        },
        noRoot() {
            let that = this;
            that.$confirm(`确认禁用该字典数据吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                that.$http('/dict/enable', 'PUT', {
                    id: that.value,
                    parentId: 0,
                    isEnable: false
                }, (resp) => {
                    if (resp.data.code === 20000) {
                        that.$message({
                            type: 'success',
                            message: '禁用成功!'
                        });
                        location.reload()
                    } else {
                        that.$message({
                            type: 'error',
                            message: resp.data.msg
                        });
                    }
                })
            }).catch(() => {
            })
        },
        noNode(id) {
            let that = this;
            that.$confirm(`确认禁用该字典数据吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                that.$http('/dict/enable', 'PUT', {
                    id: id,
                    parentId: that.value,
                    isEnable: false
                }, (resp) => {
                    if (resp.data.code === 20000) {
                        that.$message({
                            type: 'success',
                            message: '禁用成功!'
                        });
                        that.loadDictData()
                    } else {
                        that.$message({
                            type: 'error',
                            message: resp.data.msg
                        });
                    }
                })
            }).catch(() => {
            })
        },
        addDictData() {
            this.editFormVisibleForAddDictData = true;
        },
        addRoot() {
            this.editFormVisibleForAddRootData = true;
        },
        update(id) {
            let that = this;
            that.editFormVisibleForUpdateDictData = true;
            that.$http('/dict/id', 'POST', {id: id}, (resp) => {
                let data = resp.data.data;
                that.updateDictForm.id = data.id;
                that.updateDictForm.name = data.name;
                that.updateDictForm.abbreviation = data.abbreviation;
                that.updateDictForm.remarks = data.remarks;
            })
        },
        updateDictDate() {
            let that = this;
            that.$confirm(`确认修改字典数据吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log(that.updateDictForm);
                that.$http('/dict/update', 'PUT', that.updateDictForm, (resp) => {
                    if (resp.data.code === 20000) {
                        that.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        that.editFormVisibleForUpdateDictData = false;
                        that.loadDictData();
                    } else {
                        that.$message({
                            message: resp.data.msg,
                            type: 'error'
                        });
                    }
                })
            }).catch(() => {
            })
        },
        comitDict() {
            let that = this;
            that.$confirm(`确认添加字典数据吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                that.addDictForm.parentId = that.value;
                that.addDictForm.type = that.curType;
                that.$http('/dict/add', 'POST', that.addDictForm, (resp) => {
                    if (resp.data.code === 20000) {
                        that.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        that.editFormVisibleForAddDictData = false;
                        that.loadDictData();
                    } else {
                        that.$message({
                            message: resp.data.msg,
                            type: 'error'
                        });
                    }
                })
            }).catch(() => {
            })
        },
        comitRoot() {
            let that = this;
            that.$confirm(`确认添加该数据吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                that.$http('/dict/add', 'POST', that.addRootForm, (resp) => {
                    if (resp.data.code === 20000) {
                        that.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        that.editFormVisibleForAddRootData = false;
                        that.loadOptions();
                    } else {
                        that.$message({
                            message: resp.data.msg,
                            type: 'error'
                        });
                    }
                })
            }).catch(() => {
            })
        },
        loadOptions() {
            let that = this;
            that.$http('/dict/root', 'POST', null, (resp) => {
                if (resp.data.code === 20000) {
                    let data = resp.data.data;
                    if (data.length > 0) {
                        for (let i = 0; i < data.length; i++) {
                            let obj = {
                                value: data[i].id,
                                label: data[i].name
                            }
                            that.options.push(obj);
                        }
                        that.value = that.options[0].value;
                        that.loadDictData();
                    }
                }
            })
        },
        loadData() {
            let that = this;
            that.$http('/dict', 'POST', {
                pageNum: this.currentPage,
                rootId: this.value
            }, (resp) => {
                if (resp.data.code === 20000) {
                    let data = resp.data.data;
                    that.tableData = data.list;
                    if (data.list.length <= 0) {
                        this.currentPage = 1;
                    } else {
                        let message = '暂无'
                        for (let e of that.tableData) {
                            this.dictInfo(e,message)
                        }
                    }
                    this.dataListLoading = false;
                }
                that.currentPage = resp.data.data.currentPage;
                that.pageSize = resp.data.data.pageSize;
                that.total = resp.data.data.total;
            })
        },
        loadDictData() {
            this.dataListLoading = true;
            let that = this;
            that.$http('/dict', 'POST', {
                pageNum: this.currentPage,
                rootId: this.value
            }, (resp) => {
                that.$http("/dict/id",'POST',{
                    id:this.value
                },(resp)=>{
                    let data = resp.data;
                    if(data.code===20000){
                        this.curType = data.data.type;
                    }
                })
                if (resp.data.code === 20000) {
                    let data = resp.data.data;
                    that.tableData = data.list;
                    if (data.list.length <= 0) {
                        this.currentPage = 1;
                        this.loadData()
                    } else {
                        let message = '暂无'
                        for (let e of that.tableData) {
                            this.dictInfo(e,message)
                        }
                    }
                }
                that.currentPage = resp.data.data.currentPage;
                that.pageSize = resp.data.data.pageSize;
                that.total = resp.data.data.total;
                this.dataListLoading = false;
            })
        },
        // 切换分页
        changePage(page) {
            this.currentPage = page;
            if(this.isSearch){
                this.search();
            }else{
                this.loadDictData();
            }
        }
    }
}
</script>
<style lang="less">
.table {
  margin-top: 20px;
}
</style>